<template>
  <div class="searchbox">
    <el-row>
      <el-col class="dt" :span="3">分类</el-col>
      <el-col class="dd" :span="9">
        <span class="myselectoption">
          <a
            v-for="category in categoryList"
            :key="category.value"
            data-key="category"
            data-key-text="分类"
            :data-value="category.value"
            :data-valueText="category.text"
            @click="onCategorySearch"
          >{{category.text}}</a>
        </span>
      </el-col>
    </el-row>
    <!-- <el-row>
      <el-col class="dt" :span="3">关键字搜索：</el-col>
        <el-col class="dd" :span="19">
          <el-input class="wide" v-model="data.key_word" clearable placeholder="用户号/用户名/手机号" size="mini"></el-input>
      </el-col>
      <el-col class="dt" v-if="role==2||role==3" :span="3">部门用户查询:</el-col>
        <el-col  v-else :span="3"></el-col>
        <el-col class="dd"  :span="7">
          <div v-show="role==2||role==3">
            <tree-consultant placeholder="选择「顾问」" @depChange="handleDeptChange" @gwChange="handleGwChange"></tree-consultant>
          </div>
      </el-col>
      <el-col :span="2" class="dd text-right">
        <el-button size="mini" type="danger" @click="handleSearch">检索</el-button>
      </el-col>
    </el-row>-->
    <!-- <el-row>
      <el-col class="dt" :span="3">
        <el-select v-model="timeType" placeholder="时间类型" style="margin-right:10px;" size="mini">
          <el-option
            v-for="item in timeTypeOption"
            :key="item.value"
            :label="item.text"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
      <el-col class="dd" :span="9">
        <el-date-picker
          v-model="data.date_time"
          type="daterange"
          size="mini"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          @change="handleRegDatesChange"
        ></el-date-picker>
      </el-col>
      <el-col class="dt" :span="3">
        <el-select v-model="timeType2" placeholder="时间类型" style="margin-right:10px;" size="mini">
          <el-option
            v-for="item in timeTypeOption"
            :key="item.value"
            :label="item.text"
            :value="item.value"
          ></el-option>
        </el-select>
      </el-col>
      <el-col class="dd" :span="9">
        <el-date-picker
          v-model="data.date_time2"
          type="daterange"
          size="mini"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          @change="handleRegDates2Change"
        ></el-date-picker>
      </el-col>
    </el-row>-->
    <el-row class="query-condition" style="background:#f3f3f3;">
      <el-col class="dt" :span="3">搜索条件：</el-col>
      <el-col class="dd" :span="16">
        <el-tag
          v-for="query in queryDict"
          :key="query.key"
          size="small"
          closable
          @close="onCloseTag(query.key)"
        >
          <span class="tag-key">{{query.keyName}}:</span>
          {{query.text}}
        </el-tag>
      </el-col>
      <el-col class="dd text-right" :span="5">
        <el-button size="mini" @click="onResetSearch">重置搜索条件</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import treeConsultant from '@/components/basicdata/tree_consultant';
export default {
  props: {
    role: { type: Number, default: 1 }
  },
  components: {
    // treeConsultant
  },
  data() {
    return {
      timeType: "",
      timeType2: "",
      timeTypeOption: [
        { value: "1", text: "创建时间" },
        { value: "2", text: "开始时间" }
      ],
      queryDict: [],
      data: {
        key_word: "",
        dept_id: "",
        gws: "",
        time_type: "",
        time_type2: "",
        date_time: [],
        date_time2: []
      },
      categoryList: [
        { value: 1, text: "全部" },
        { value: 2, text: "家居百货" },
        { value: 3, text: "家用电器" },
        { value: 4, text: "食品酒水" },
        { value: 5, text: "服装配饰" },
        { value: 6, text: "美妆个护" },
        { value: 7, text: "母婴用品" },
        { value: 8, text: " 数码办公" },
        { value: 9, text: "汽车用品" },
        { value: 10, text: "精选箱包" },
        { value: 11, text: "运动户外" }
      ]
    };
  },
  watch: {
    timeType: function(value) {
      this.data.time_type = value > 0 ? value : 0;
      if (
        this.data.time_type > 0 &&
        this.data.date_time != null &&
        this.data.date_time.length > 0
      ) {
        let text =
          this.formatDate(this.data.date_time[0]) +
          "-" +
          this.formatDate(this.data.date_time[1]);
        this.buildQueryDict(
          "regDate",
          this.getTimeKeyName(this.data.time_type),
          text
        );
        this.handleChange();
      }
    },
    timeType2: function(value) {
      this.data.time_type2 = value > 0 ? value : 0;
      if (
        this.data.time_type2 > 0 &&
        this.data.date_time2 != null &&
        this.data.date_time2.length > 0
      ) {
        let text =
          this.formatDate(this.data.date_time2[0]) +
          "-" +
          this.formatDate(this.data.date_time2[1]);
        this.buildQueryDict(
          "regDate2",
          this.getTimeKeyName(this.data.time_type2),
          text
        );
        this.handleChange();
      }
    }
  },
  methods: {
    handleChange() {
      this.$emit("change", this.data);
    },
    handleSearch() {
      if (this.data.key_word != "") {
        this.buildQueryDict("keyWord", "关键字搜索", this.data.key_word);
      } else {
        var index = this.queryDict.findIndex(x => x.key === "keyWord");
        if (index >= 0) {
          this.queryDict.splice(index, 1);
        }
      }
      this.handleChange();
    },
    onCategorySearch(event) {
      var data = event.target.dataset;
      if (data && data.key) {
        console.log(data);
       //console.log(data.value);
        this.buildQueryDict(data.key, data.keyText, data.valuetext);
      }
      this.handleChange();
    },

    handleDeptChange(value) {
      this.data.dept_id = value;
    },
    handleGwChange(value) {
      this.data.gws = value;
    },
    handleRegDatesChange() {
      if (this.data.date_time != null && this.data.date_time.length > 0) {
        if (this.data.time_type > 0) {
          let text =
            this.formatDate(this.data.date_time[0]) +
            "-" +
            this.formatDate(this.data.date_time[1]);
          this.buildQueryDict(
            "regDate",
            this.getTimeKeyName(this.data.time_type),
            text
          );
          this.handleChange();
        }
      } else {
        var index = this.queryDict.findIndex(x => x.key === "regDate");
        if (index >= 0) {
          this.queryDict.splice(index, 1);
        }
        this.handleChange();
      }
    },
    handleRegDates2Change() {
      if (this.data.date_time2 != null && this.data.date_time2.length > 0) {
        if (this.data.time_type2 > 0) {
          let text =
            this.formatDate(this.data.date_time2[0]) +
            "-" +
            this.formatDate(this.data.date_time2[1]);
          this.buildQueryDict(
            "regDate2",
            this.getTimeKeyName(this.data.time_type2),
            text
          );
          this.handleChange();
        }
      } else {
        var index = this.queryDict.findIndex(x => x.key === "regDate2");
        if (index >= 0) {
          this.queryDict.splice(index, 1);
        }
        this.handleChange();
      }
    },
    onResetSearch() {
      this.data.key_word = "";
      this.data.dept_id = 0;
      this.data.gws = [];
      this.data.time_type = 0;
      this.data.date_time = [];
      this.data.time_type2 = 0;
      this.data.date_time2 = [];

      this.queryDict = [];
      this.handleChange();
    },
    //----------辅助类方法------------------------------------
    getTimeKeyName(value) {
      let obj = this.timeTypeOption.find(t => t.value == value);
      return obj.text;
    },
    formatDate(datetime) {
      return this.$Shared.formatDate(datetime);
    },
    buildQueryDict(key, keyName, text) {
      var index = this.queryDict.findIndex(x => x.key === key);
      if (index >= 0) {
        this.queryDict.splice(index, 1);
      }
      if (text != null && text != "") {
        this.queryDict.push({
          key: key,
          keyName: keyName,
          text: text
        });
      }
    },
    onCloseTag(key) {
      var index = this.queryDict.findIndex(x => x.key === key);
      if (index >= 0) {
        this.queryDict.splice(index, 1);
        this.removeKey(key);
      }
      this.handleChange();
    },
    removeKey(key) {
      switch (key) {
        case "keyWord":
          this.data.key_word = "";
          break;
        case "regDate":
          this.data.date_time = "";
          break;
        case "regDate2":
          this.data.date_time2 = "";
          break;
      }
    }
    // GetQueryDict() {
    //   var dict = [];
    //   this.queryDict.forEach(qd => {
    //     dict.push({
    //       key: qd.key,
    //       keyText: qd.keyName,
    //       value: '',
    //       valueText: qd.text
    //     });
    //   });
    //   return dict;
    // }
  }
};
</script>


<style lang="scss" scoped>
.searchbox .el-checkbox-group {
  display: inline-block;
  margin-right: 32px;
}

.searchbox .me-source {
  position: relative;
  left: 12.5%;
}

.searchbox .me-source .el-checkbox {
  width: 100px;
  margin-left: 0;
}

.searchbox .el-col {
  height: 34px;
  line-height: 34px;
}
$navy_blue: #2e56a1;
.myselectoption {
  color: $navy_blue;
}

.myselectoption a {
  display: inline-block;
  margin-right: 22px;
  min-width: 22px;
  color: $navy_blue;
}

.myselectoption a:not([href]):not([tabindex]):focus,
a:not([href]):not([tabindex]):hover,
.myselectoption a:hover {
  color: #0000ff;
}
</style>
